<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewpo rt" content="width=device-width, initial-scale=1.0">
		<title>排行榜</title>
		<script src="js/jquery-3.6.0.js"></script>
		<link rel="stylesheet" href="css/reset.css" type="text/css">
		<link rel="stylesheet" href="css/ranking_list.css" type="text/css" />
		<link rel="stylesheet" href="css/utrls.css" type="text/css">

	</head>
	<body>
		<!-- 黑色导航条 -->
		<div class="m_top">
			<div class="wrap">
				<a href="index.html"><h1 class="logo"></h1></a>
				<!-- 导航条 -->
				<ul class="m_navWrap">
					<li class="z_slt">发现音乐</li>
					<li>我的音乐</li>
					<li>关注</li>
					<li><a href="market.html" style="color: #ccc;text-decoration: none;" target="_blank">商场</a></li>
					<li>音乐人</li>
					<li>云推歌</li>
					<li class="pr">下载客户端
						<i class="hot"></i>
					</li>
				</ul>
				<!-- 登录 -->
				<a class="login_btn" href="login.html">
					登录
				</a>
				<!-- 创作者中心 -->
				<a href="#" class="creator">创作者中心</a>
				<!-- 搜索框 -->
				<div class="music_serarch">
					<input class="serach_input" type="text" />
					<label class="click">音乐/视频/电台/用户</label>
				</div>
			</div>
		</div>

		<!-- 红色导航条 -->
		<div class="r_top">
			<div class="r_navWrap">
				<ul>
					<li>
						<a href="index.html">推荐</a>
					</li>
					<li>
						<a class="a_bg" href="#">排行榜</a>
					</li>
					<li>
						<a>歌单</a>
					</li>
					<li>
						<a>主播电台</a>
					</li>
					<li>
						<a>歌手</a>
					</li>
					<li>
						<a>新碟上架</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="c" style="height: 2px;"></div>
		<!-- 主要界面 -->
		<div class="main clearfix">
			<!-- 左边 -->
			<div class="l_main">
				<div class="l_wamp">
					<h2>云音乐特色榜</h2>
					<ul class="w_cb">
						<li>
							<div class="item">
								<a href="" class="tp">
									<img src="img/bsb.jpg" alt="" srcset="" />
								</a>
								<p class="name">
									<a href="">飙升榜</a>
								</p>
								<p style="padding-left: 60px; color: #ccc;">刚刚更新</p>
							</div>
						</li>
						<li>
							<div class="item">
								<a href="" class="tp">
									<img src="img/bsb.jpg" alt="" srcset="" />
								</a>
								<p class="name">
									<a href="">飙升榜</a>
								</p>
								<p style="padding-left: 60px; color: #ccc;">刚刚更新</p>
							</div>
						</li>
						<li>
							<div class="item">
								<a href="" class="tp">
									<img src="img/bsb.jpg" alt="" srcset="" />
								</a>
								<p class="name">
									<a href="">飙升榜</a>
								</p>
								<p style="padding-left: 60px; color: #ccc;">刚刚更新</p>
							</div>
						</li>
						<li>
							<div class="item">
								<a href="" class="tp">
									<img src="img/bsb.jpg" alt="" srcset="" />
								</a>
								<p class="name">
									<a href="">飙升榜</a>
								</p>
								<p style="padding-left: 60px; color: #ccc;">刚刚更新</p>
							</div>
						</li>
					</ul>
					<h2>全球媒体榜</h2>
					<ul class="w_cb">
						<li>
							<div class="item">
								<a href="" class="tp">
									<img src="img/bsb.jpg" alt="" srcset="" />
								</a>
								<p class="name">
									<a href="">飙升榜</a>
								</p>
								<p style="padding-left: 60px; color: #ccc;">刚刚更新</p>
							</div>
						</li>
						<li>
							<div class="item">
								<a href="" class="tp">
									<img src="img/bsb.jpg" alt="" srcset="" />
								</a>
								<p class="name">
									<a href="">飙升榜</a>
								</p>
								<p style="padding-left: 60px; color: #ccc;">刚刚更新</p>
							</div>
						</li>
						<li>
							<div class="item">
								<a href="" class="tp">
									<img src="img/bsb.jpg" alt="" srcset="" />
								</a>
								<p class="name">
									<a href="">飙升榜</a>
								</p>
								<p style="padding-left: 60px; color: #ccc;">刚刚更新</p>
							</div>
						</li>
						<li>
							<div class="item">
								<a href="" class="tp">
									<img src="img/bsb.jpg" alt="" srcset="" />
								</a>
								<p class="name">
									<a href="">飙升榜</a>
								</p>
								<p style="padding-left: 60px; color: #ccc;">刚刚更新</p>
							</div>
						</li>
					</ul>
				</div>

			</div>
			<!-- 右边 -->
			<div class="r_main">
				<div class="r_warp">
					<div class="r_info">
						<div class="r_tp">
							<img src="img/bsb.jpg" alt="" />
							<div class="cnt">
								<h2>飙升榜</h2>
								<div class="user">
									<i></i>
									<span>最近更新：10月31日</span>
									<span style="color: #999;">（刚刚更新）</span>
								</div>
								<div class="btns">
									<a href="" class="bf">
										<i>
											<em class="ply"></em>
											播放
										</i>
									</a>
									<a href="" class="add"></a>
									<a href="" class="qt">
										<i>4133016</i>
									</a>
									<a href="" class="qt">
										<i style="background-position: 0 -1225px;"> (16207) </i>
									</a>
									<a href="" class="qt">
										<i>下载</i>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="r_list">
					<div class="list_name">
						<h3>歌曲列表</h3>
						<span>100首歌</span>
						<div class="more">
							播放
							<strong style="color: red;">
								299284912
							</strong>次
						</div>
					</div>
					<table>
						<tr>
							<th></th>
							<th>标题</th>
							<th>时长</th>
							<th>歌手</th>
						</tr>
						<tr>
							<td>1</td>
							<td>Happy Face</td>
							<td>02:50</td>
							<td>Jagwar Twin</td>
						</tr>
						<tr>
							<td>1</td>
							<td>Happy Face</td>
							<td>02:50</td>
							<td>Jagwar Twin</td>
						</tr>
						<tr>
							<td>1</td>
							<td>Happy Face</td>
							<td>02:50</td>
							<td>Jagwar Twin</td>
						</tr>
						<tr>
							<td>1</td>
							<td>Happy Face</td>
							<td>02:50</td>
							<td>Jagwar Twin</td>
						</tr>
						<tr>
							<td>1</td>
							<td>Happy Face</td>
							<td>02:50</td>
							<td>Jagwar Twin</td>
						</tr>
						<tr>
							<td>1</td>
							<td>Happy Face</td>
							<td>02:50</td>
							<td>Jagwar Twin</td>
						</tr>
						<tr>
							<td>1</td>
							<td>Happy Face</td>
							<td>02:50</td>
							<td>Jagwar Twin</td>
						</tr>
						<tr>
							<td>1</td>
							<td>Happy Face</td>
							<td>02:50</td>
							<td>Jagwar Twin</td>
						</tr>
						<tr>
							<td>1</td>
							<td>Happy Face</td>
							<td>02:50</td>
							<td>Jagwar Twin</td>
						</tr>
					</table>
				</div>

				<div class="comment">
					<div class="list_name">
						<h3>评论</h3>
						<span>共223853条评论</span>
					</div>
					<div class="cmmt">
						<div class="head">
							<img src="img/default_avatar.jpg" alt="" />
						</div>
						<textarea placeholder="评论" spellcheck="false" name="" id="" cols="30" rows="10"></textarea>
						<div class="an">
							<i class="xl"></i>
							<i class="at"></i>
							<a href="">评论</a>
						</div>
					</div>
					<div class="speak">
						<h3>精彩评论</h3>
						<div class="sp">
							<div class="head">
								<img src="img/pl1.jpg" alt="" />
							</div>
							<div class="pl">
								<a href="">爱椿的湫_：毋庸置疑。天份1551%，承蒙关照</a>
							</div>
							<div class="time">
								2018年12月22日
								<a href="" class="hf">
									 5353 | 回复<i></i>
								</a>
							</div>
						</div>
						<div class="sp">
							<div class="head">
								<img src="img/pl1.jpg" alt="" />
							</div>
							<div class="pl">
								<a href="">爱椿的湫_：毋庸置疑。天份1551%，承蒙关照</a>
							</div>
							<div class="time">
								2018年12月22日
								<a href="" class="hf">
									 5353 | 回复<i></i>
								</a>
							</div>
						</div>
						<div class="sp">
							<div class="head">
								<img src="img/pl1.jpg" alt="" />
							</div>
							<div class="pl">
								<a href="">爱椿的湫_：毋庸置疑。天份1551%，承蒙关照</a>
							</div>
							<div class="time">
								2018年12月22日
								<a href="" class="hf">
									 5353 | 回复<i></i>
								</a>
							</div>
						</div>
						<div class="sp">
							<div class="head">
								<img src="img/pl1.jpg" alt="" />
							</div>
							<div class="pl">
								<a href="">爱椿的湫_：毋庸置疑。天份1551%，承蒙关照</a>
							</div>
							<div class="time">
								2018年12月22日
								<a href="" class="hf">
									 5353 | 回复<i></i>
								</a>
							</div>
						</div>
						<div class="sp">
							<div class="head">
								<img src="img/pl1.jpg" alt="" />
							</div>
							<div class="pl">
								<a href="">爱椿的湫_：毋庸置疑。天份1551%，承蒙关照</a>
							</div>
							<div class="time">
								2018年12月22日
								<a href="" class="hf">
									 5353 | 回复<i></i>
								</a>
							</div>
						</div>
						<div class="sp">
							<div class="head">
								<img src="img/pl1.jpg" alt="" />
							</div>
							<div class="pl">
								<a href="">爱椿的湫_：毋庸置疑。天份1551%，承蒙关照</a>
							</div>
							<div class="time">
								2018年12月22日
								<a href="" class="hf">
									 5353 | 回复<i></i>
								</a>
							</div>
						</div>
						<div class="sp">
							<div class="head">
								<img src="img/pl1.jpg" alt="" />
							</div>
							<div class="pl">
								<a href="">爱椿的湫_：毋庸置疑。天份1551%，承蒙关照</a>
							</div>
							<div class="time">
								2018年12月22日
								<a href="" class="hf">
									 5353 | 回复<i></i>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 回到顶部 top -->
		<a class="return_top" href="#"></a>

		<!-- 底部 -->
		<div class="footer">
			<div class="f_main">
				<div class="f_wrap">
					<ul class="enther">
						<li class="unit">
							<a href="" class="f_logo a1"></a>
							<span class="title">音乐开放平台</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a2"></a>
							<span class="title">云村交易所</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a3"></a>
							<span class="title">X studioAIg歌手</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a4"></a>
							<span class="title">用户认证</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a5"></a>
							<span class="title">AI免费写歌</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a6"></a>
							<span class="title">云推歌</span>
						</li>
						<li class="unit">
							<a href="" class="f_logo a7"></a>
							<span class="title">赞赏</span>
						</li>
					</ul>
					<div class="copy">
						<p class="link">
							<a href="" class="item">服务条款</a>
							<span class="line">|</span>
							<a href="" class="item">隐私政策</a>
							<span class="line">|</span>
							<a href="" class="item">儿童隐私政策</a>
							<span class="line">|</span>
							<a href="" class="item">版权投诉</a>
							<span class="line">|</span>
							<a href="" class="item">投资者关系</a>
							<span class="line">|</span>
							<a href="" class="item">广告合作</a>
							<span class="line">|</span>
							<a href="" class="item">联系我们</a>
						</p>
						<p>
							<a href="">廉正举报</a>
							<span>不良信息举报邮箱: 51jubao@service.netease.com</span>
							<span>客服热线：95163298</span>
						</p>
						<p>
							<span>互联网宗教信息服务许可证：浙（2022）0000120</span>
							<span>增值电信业务经营许可证：浙B2-20150198</span>
							<a href="">粤B2-20090191-18 工业和信息化部备案管理系统网站</a>
						</p>
						<p>
							<span>网易公司版权所有©1997-2024</span>
							<span>杭州乐读科技有限公司运营：</span>
							<a href="">浙网文[2024] 0900-042号</a>
							<span class="s_logo"></span>
							<a href="">浙公网安备 33010802013307号</a>
							<a href="">算法服务公示信息</a>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部播放器 -->
		<div class="play_bar">
			<div class="wrap">
				<div class="btn">
					<a href="" title="上一首" class="up"></a>
					<a href="" title="播放/暂停" class="go"></a>
					<a href="" title="下一首" class="dow"></a>
				</div>
				<div class="head">
					<img src="img/tj1.jpg" alt="" />
					<a href="" class="mask"></a>
				</div>
				<div class="play_wrap">
					<div class="play_info">
						<a href="" class="song_name">小尖尖</a>
						<a href="" class="song_author">薛之谦</a>
						<a href="" class="song_src"></a>
					</div>
					<!-- 进度条 -->
					<div class="play_bg">
						<div class="bar_bg"></div>
						<div class="cur" style="width: 30%;">
							<a href="" class="gd_btn">

							</a>
						</div>
						<div class="play_time">
							<em>01:33</em>/03:11
						</div>
					</div>
				</div>
				<div class="oper">
					<a href="" title="画中画歌词" class="lyric"></a>
					<a href="" title="收藏" class="like"></a>
					<a href="" title="分享" class="share"></a>
				</div>
				<div class="ctrl">
					<!-- 音量 -->
					<a href="" class="icon"></a>
					<a href="" class="loop"></a>
					<a href="" class="list">0</a>
					<a href="" class="turn"></a>
				</div>
			</div>
			<div class="updn">
				<div class="up_left">
					<a href="" class="up_btn"></a>
				</div>
				<div class="up_right"></div>
			</div>
		</div>
	</body>
</html>